<template>
  <div class="flex flex-grow">
    <div class="flex flex-row flex-wrap gap-1 md:gap-3">
      <button v-if="searchTagList.length" @click="clearFilter"
        class="border border-ink text-ink bg-transparent rounded-lg font-bold p-2 text-xs flex flex-row items-center gap-2 leading-3 cursor-pointer select-none">
        <svg class="w-3 h-3" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Path Copy</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M15.6063703,2.29522225 C16.1312099,1.7703827 16.1312099,0.918469218 15.6063703,0.393629665 C15.0815308,-0.131209888 14.2296173,-0.131209888 13.7047778,0.393629665 L8,6.09840742 L2.29522225,0.393629665 C1.7703827,-0.131209888 0.918469218,-0.131209888 0.393629665,0.393629665 C-0.131209888,0.918469218 -0.131209888,1.7703827 0.393629665,2.29522225 L6.09840742,8 L0.393629665,13.7047778 C-0.131209888,14.2296173 -0.131209888,15.0815308 0.393629665,15.6063703 C0.918469218,16.1312099 1.7703827,16.1312099 2.29522225,15.6063703 L8,9.90159258 L13.7047778,15.6063703 C14.2296173,16.1312099 15.0815308,16.1312099 15.6063703,15.6063703 C16.1312099,15.0815308 16.1312099,14.2296173 15.6063703,13.7047778 L9.90159258,8 L15.6063703,2.29522225 Z"
              id="Path-Copy" fill="currentColor" fill-rule="nonzero"></path>
          </g>
        </svg>Clear all filters</button>
      <button v-for="item in searchTagList" :key="item.title"
        class="border border-spindle text-ink bg-periwinkle-gray rounded-lg font-bold p-2 text-xs flex flex-row items-center gap-3 leading-3 cursor-pointer select-none">
        {{item.title}}
        <svg @click="removeTag(item)" class="w-3 h-3" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
          xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <title>Path Copy</title>
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M15.6063703,2.29522225 C16.1312099,1.7703827 16.1312099,0.918469218 15.6063703,0.393629665 C15.0815308,-0.131209888 14.2296173,-0.131209888 13.7047778,0.393629665 L8,6.09840742 L2.29522225,0.393629665 C1.7703827,-0.131209888 0.918469218,-0.131209888 0.393629665,0.393629665 C-0.131209888,0.918469218 -0.131209888,1.7703827 0.393629665,2.29522225 L6.09840742,8 L0.393629665,13.7047778 C-0.131209888,14.2296173 -0.131209888,15.0815308 0.393629665,15.6063703 C0.918469218,16.1312099 1.7703827,16.1312099 2.29522225,15.6063703 L8,9.90159258 L13.7047778,15.6063703 C14.2296173,16.1312099 15.0815308,16.1312099 15.6063703,15.6063703 C16.1312099,15.0815308 16.1312099,14.2296173 15.6063703,13.7047778 L9.90159258,8 L15.6063703,2.29522225 Z"
              id="Path-Copy" fill="currentColor" fill-rule="nonzero"></path>
          </g>
        </svg>
      </button>
    </div>
  </div>
</template>
<script lang="ts">
import { SET_SEARCH_LIST } from '@/store';
import { computed, defineComponent, } from 'vue'
import { useStore } from 'vuex';
export default defineComponent({

  setup() {
    const store = useStore();
    const searchTagList = computed(() => store.state.searchList)

    const clearFilter = () => {
      store.commit(SET_SEARCH_LIST, [])
    }

    const removeTag = (item: { title: any; }) => {
      const list = searchTagList.value.filter((obj: { title: any; }) => obj.title !== item.title)
      store.commit(SET_SEARCH_LIST, list)
    }

    return {
      searchTagList,
      clearFilter,
      removeTag
    }
  }

})
</script> 
